<template>
  <div class="home">
    <!-- 顶部导航组件 -->
    <van-sticky >
    <van-nav-bar title="首页"> </van-nav-bar>
    </van-sticky>
    <!-- 顶部消息滚动提示 -->
    <van-notice-bar
      left-icon="volume-o"
      text="一年一次的京东618即将到来，欢迎大家前来京东抢购物品"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img :src="item.url | diaImg" class="img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 中间内容卡片部分 -->
    <van-grid :column-num="3">
      <van-grid-item
        v-for="value in categories"
        :key="value.id"
        :icon="value.coverImage | diaImg"
        :text="value.name"
        :to="{name:'List',query:{id:value.id}}">
        </van-grid-item>
      
    </van-grid>
    <!-- 主要区域部分 -->
    <div class="card">
      <van-card
       v-for="item in products" :key="item.id"
        :num="item.amount"
        :price="item.price"
        :origin-price="(item.price*1.2).toFixed(2)"
        currency="￥"
        :desc="item.desc"
        :title="item.name"
        :thumb="item.coverImage | diaImg"
        @click="loadDetail(item.id)"
      />
    </div>
  </div>
</template>

<script>
import {loadBannerData} from "@/services/banners"
import {loadCategoriesAPI} from "@/services/categories"
import {loadProductAPI} from "@/services/products"

export default {
  name: "HomeView",
  data() {
    return {
      images: [],
      categories:[],
      products:[],
    };
  },
 created(){
   this.loadData();
    // console.log(this.images);
  },
  methods:{
    async loadData() {
      // 获取轮播图数据
      const banners = await loadBannerData();
      this.images = banners.data.map(item=>{return {url:item.coverImage}});
      // 获取商品分类
      const categary = await loadCategoriesAPI();
      this.categories = categary.data;
      console.log(JSON.parse(JSON.stringify(this.categories)) );
      // 获取商品列表
      const products = await loadProductAPI();
      this.products = products.data;
    },
    loadDetail(id) {
       console.log(id);
       this.$router.push({
        name: "Detail",
        params: {
          id,
        },
      });
    }
  },
  components: {
  },
};
</script>

<style scoped>
.img {
  width: 100vw;
  height: 150px;
}
</style>
